<template>
  <div>
    <!--    <el-container>
          <el-header>-->
    <el-row>
      <el-col style="width:100%;background-color: #43C6AC">
        <el-menu
          default-active="jumpInstruction()"
          router
          mode="horizontal"
          background-color="#43C6AC"
          text-color="#fff"
          active-text-color="#F8FFAE">
          <el-menu-item index="/view">首页</el-menu-item>
          <!--<el-menu-item index="/backstage/index" @click="handleBackstage">达人后台</el-menu-item>-->
          <!-- <el-menu-item index="/backstage/merchantBackstage" @click="handlemerchantBackstage">商家后台</el-menu-item> -->
          <el-menu-item index="/business" @click="handlemerchantBackstage">商家后台</el-menu-item>
          <!--<el-menu-item index="/activity/special" @click="handleActivity">9.9特区</el-menu-item>-->
          <el-menu-item v-if="isLoginShow">
            <el-button type="primary" @click="handleLogin" plain>登录/注册</el-button>
            <!--<el-button type="primary" @click="handleLogin" plain>登录</el-button>-->
          </el-menu-item>
          <el-submenu index="2" v-if="isAccountShow">
            <template slot="title">账号名称</template>
            <el-menu-item index="2-1" style="text-align:center" @click="outLogin">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <!--  </el-header>
      <el-main>-->
    <router-view/>
    <!--    </el-main>
      </el-container>-->
    <el-dialog
      title="登录"
      :visible.sync="loginDialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form :model="loginData" :label-position="label='top'">
        <el-form-item label="手机号">
          <el-input v-model="loginData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginData.password" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="验证码">
          <el-row>
            <el-col :span="11">
              <el-input
                v-model="loginData.code"
                auto-complete="off"
                placeholder="验证码"
                style="width: 100%">
              </el-input>
            </el-col>
            <el-col :span="13" style="padding-left: 30px">
              <img :src="codeUrl" @click="getCode" style="width: 100px;height: 40px;"/>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleRegister">注册</el-button>
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="onLoginSubmit">确 定</el-button>
      </div>
      </span>
    </el-dialog>

    <el-dialog
      title="注册"
      :visible.sync="registerDialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form :model="registerData" :rules="registerRules" ref="registerRulesRef">
        <!--<el-form-item label="用户名" prop="userName">
          <el-input v-model="registerData.userName"></el-input>
        </el-form-item>-->
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="registerData.phonenumber"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="codeStr">
          <el-input v-model="registerData.codeStr" style="width: 50%"></el-input>
          <el-button v-if="show" style="margin-left: 20%" plain @click="getCodeStr">获取验证码</el-button>
          <span v-if="!show" style="color: #707070;margin-left: 20%">{{count}}s后重新获取</span>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerData.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="请输入确认密码" prop="newPassword">
          <el-input v-model="registerData.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="registerData.nickName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="registerSubmit">确 定</el-button>
      </div>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {setToken, getToken, removeToken} from '@/utils/cookie'
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  export default {
    components: {
      ElCol,
      ElRow
    },
    created() {
      this.jumpInstruction();
      this.checkToken();
    },
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.registerData.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        isLoginShow: true,
        show: true,
        count: "",
        timer: null,
        isAccountShow: false,
        loginDialogVisible: false,
        registerDialogVisible: false,
        codeUrl: '',
        uuid: '',
        loginData: {},
        registerData: {},
        registerRules: {
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          newPassword: [
            {required: true, validator: validatePass2, trigger: 'blur'}
          ],
          nickName: [
            {required: true, message: '请输入用户昵称', trigger: 'blur'}
          ],
          phonenumber: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {
              pattern: /^1[3456789]\d{9}$/,
              message: '请输入正确的手机号'
            }
          ]
        }
      }
    },
    methods: {
      jumpInstruction(){
        console.log(this.$route.path)
        if (this.$route.path === '/') {
          return this.$router.push('/view')
        } else {
          return this.$route.path
        }
      },
      getCode() {
        this.$http.defaults.headers.common['Authorization'] = ''
        this.$http.get('/captchaImage').then((res) => {
          this.codeUrl = "data:image/gif;base64," + res.data.img;
          this.loginData.uuid = res.data.uuid;
        })
      },
      onLoginSubmit(){
        this.$http.defaults.headers.common['Authorization'] = ''
        this.$http.post('login', this.loginData).then((res) => {
          if (res.data.code === 200) {
            setToken(res.data.token)
            this.isLoginShow = false
            this.isAccountShow = true
            this.$message.success('登录成功')
          } else {
            this.$message.error(res.data.msg)
            this.isLoginShow = true
            this.isAccountShow = false
          }
        })
        this.loginData = {}
        this.loginDialogVisible = false
      },
      checkToken(){
        const token = getToken()
        if (token) {
          this.isLoginShow = false
          this.isAccountShow = true
        }
      },
      registerSubmit(){
        this.$refs.registerRulesRef.validate(valid => {
          if (!valid) {
            this.$message.error('请安要求填写数据')
          } else {
            this.onRegisterSubmit();
          }
        })
      },
      onRegisterSubmit(){
        this.$http.defaults.headers.common['Authorization'] = ''
        this.$http.post(`/user/add/${this.registerData.codeStr}/${this.uuid}`, this.registerData).then((res) => {
          if (res.data.code === 200) {
            this.$message.success('注册成功')
            this.registerDialogVisible = false
            this.registerData = {}
          } else {
            this.$message.error(res.data.msg)
            this.registerData = {}
          }
        })
      },
      handleLogin(){
        this.getCode()
        this.loginDialogVisible = true
      },
      handleRegister(){
        this.registerDialogVisible = true
      },
      handleClose(){
        this.loginData = {}
        this.registerData = {}
        this.loginDialogVisible = false
        this.registerDialogVisible = false
      },
      outLogin(){
        removeToken()
        this.$router.push({path: '/view'})
        this.isLoginShow = true
        this.isAccountShow = false
      },
      handleBackstage(){
        const token = getToken()
        if (!token) {
          this.$router.push({path: '/view'})
          this.$message.warning('需要登录')
        }
      },
      handlemerchantBackstage(){
        const token = getToken()
        if (!token) {
          this.$router.push({path: '/view'})
          this.$message.warning('需要登录')
        }
      },
      getCodeStr(){
        this.$http.defaults.headers.common['Authorization'] = ''
        this.$http.get(`/utils/send/msg`, {
          params: {
            mobile: this.registerData.phonenumber
          }
        }).then((res) => {
          this.uuid = ''
          this.uuid = res.data.msg
          let TIME_COUNT = 60;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
          console.log(res)
        })
      }
    }
  }
</script>

<style>

</style>
